// tslint:disable-next-line:jsx-no-multiline-js

import React, { Component } from 'react';
import styles from './index.css';
import _ from 'lodash';
import router from 'umi/router';
import { connect } from 'dva';
import { Dispatch, AnyAction } from 'redux';
import { isMenuVisible } from '../utils/utils';

interface MenuProps {
  dispatch: Dispatch<AnyAction>;
}
interface MenuState {
  isShow: boolean;
  isShowMenu: boolean;
  isBg: number;
}
@connect(() => ({}))
class Menu extends Component<MenuProps, MenuState> {
  state: MenuState = {
    isShow: false,
    isShowMenu: true,
    isBg: 0,
  };
  handle() {
    const { dispatch } = this.props;
    dispatch({ type: 'device/changeDeviceCollectionList', payload: '' });
    dispatch({ type: 'device/setActiveTab', payload: '0' });
    dispatch({ type: 'device/deviceTypeNoIdClear' });
    dispatch({ type: 'device/deviceSearchClear' });
    localStorage.removeItem('systemMenu');
    localStorage.removeItem('page');
  }
  render() {
    return (
      <div>
        <div
          className={styles.menuContainer}
          onMouseLeave={e => {
            e.stopPropagation();
            this.setState({ isShow: false, isShowMenu: true });
          }}
          style={{
            animation: this.state.isShow
              ? 'move 0.5s linear forwards'
              : 'moveOut 0.5s linear forwards',
          }}
        >
          <div
            className={`${styles.homes} ${styles.commImg} ${
              this.state.isBg === 0 ? styles.homePic : null
            } `}
            onClick={e => {
              e.stopPropagation();
              this.setState({ isBg: 0 });
              router.push('/home');
            }}
          >
            <img src={require('@/assets/images/dashboard/house.png')} alt="" />
            <p className={styles.commSize}>首 页</p>
          </div>
          {isMenuVisible('device:index') && (
            <div
              className={`${styles.device} ${styles.commImg} ${
                this.state.isBg === 1 ? styles.centerPic : null
              }`}
              onClick={e => {
                e.stopPropagation();
                this.setState({ isBg: 1 });
                router.push('/device');
                this.handle();
              }}
            >
              <img src={require('@/assets/images/dashboard/device.png')} alt="" />
              <p className={styles.commSize}>设 备</p>
            </div>
          )}
          {isMenuVisible('count:index') && (
            <div
              className={`${styles.report} ${styles.commImg}  ${
                this.state.isBg === 2 ? styles.centerPic : null
              }`}
              onClick={e => {
                e.stopPropagation();
                this.setState({ isBg: 2 });
                router.push('/Statistics');
                this.handle();
              }}
            >
              <img src={require('@/assets/images/dashboard/staticss.png')} alt="" />
              <p className={styles.commSize}>统 计</p>
            </div>
          )}
          {isMenuVisible('alam:index') && (
            <div
              className={`${styles.alarm} ${styles.commImg} ${styles.rz}  ${
                this.state.isBg === 3 ? styles.centerPic : null
              }`}
              onClick={e => {
                e.stopPropagation();
                this.setState({ isBg: 3 });
                router.push('/callpoliceManage');
                this.handle();
              }}
            >
              <img src={require('@/assets/images/dashboard/alarm.png')} alt="" />
              <p className={styles.commSize}>报 警</p>
            </div>
          )}
          {isMenuVisible('system:log:index') && (
            <div
              className={`${styles.record} ${styles.commImg} ${styles.rz}  ${
                this.state.isBg === 4 ? styles.centerPic : null
              }`}
              style={{ paddingTop: '20px' }}
              onClick={e => {
                e.stopPropagation();
                this.setState({ isBg: 4 });
                router.push('/JournalManage');
                this.handle();
              }}
            >
              <img src={require('@/assets/images/dashboard/record.png')} alt="" />
              <p className={styles.commSize}>日 志</p>
            </div>
          )}
          {isMenuVisible('system:manage:index') && (
            <div
              className={`${styles.set} ${styles.commImg}  ${
                this.state.isBg === 5 ? styles.setPic : null
              }`}
              onClick={e => {
                e.stopPropagation();
                this.setState({ isBg: 5 });
                router.push('/system');
                this.handle();
              }}
            >
              <img src={require('@/assets/images/dashboard/sets.png')} alt="" />
              <p className={styles.commSize}>系 统</p>
            </div>
          )}
        </div>
        <div
          className={styles.menuShow}
          onMouseOver={() => {
            this.setState({ isShowMenu: false, isShow: true });
          }}
          style={{
            animation: this.state.isShowMenu
              ? 'menuMove 0.5s linear forwards'
              : 'menuMoveOut 0.5s linear forwards',
          }}
        >
          <p>菜</p>
          <p>单</p>
        </div>
      </div>
    );
  }
}

export default Menu;
